<template>
  <MyDialog :mode="props.mode" title="event log" class="card-radius">
    <ScrollArea :bot-margin="100" >
      <!-- <table style="width: 100%; padding-bottom: 2rem;">
        <thead>
          <tr class="row list-header">
            <th class="col-1 fal">Stock Code</th>
            <th class="col-1 fal">Serial No</th>
            <th class="col-2 fal">Action</th>
            <th class="col-3 fal">Description</th>
            <th class="col-2 fal">Username</th>
            <th class="col-2 fal">Datetime</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in filterRow" :key="index" class="row list-item">
            <td class="col-1 word-wrap cap">{{ item.stock_code }}</td>
            <td class="col-1 word-wrap cap">{{ item.part }}</td>
            <td class="col-2 word-wrap cap">{{ item.action }}</td>
            <td class="col-3  word-wrap cap">{{ item.description }}</td>
            <td class="col-2  word-wrap cap">{{ item.username }}</td>
            <td class="col-2  word-wrap cap">{{ formatDateTimeString(item.timestamp) }}</td>
          </tr>
        </tbody>
      </table> -->
    </ScrollArea>
  </MyDialog>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import MyDialog from './container/MyDialog.vue';
import ScrollArea from './ScrollArea.vue';
import { listOrderLog } from 'src/services/activityLogService';
import { EventLogInterface } from 'src/services/type';

const props = defineProps<{
  mode: 'order';
  order: number;
}>();

const rows = ref<EventLogInterface[]>();

const filterRow = computed(() => {
  return rows.value;
});

function init() {
  if (props.mode == 'order') {
    initOrderLog();
  }
}

init();

async function initOrderLog() {
  const data = await listOrderLog(props.order);
  console.log(data);
  rows.value = data.data;
}
</script>

<style scoped>
table thead {
  position: sticky;
  background-color: #f4f4f4;
  top: 0;
  z-index: 10;
}
th,
td {
  text-align: left;
  padding: 8px 16px;
}
</style>
